<template>
	<view class="content">
		<view class="bag"></view>
		<nav-bar title="健康百科"  :titleColor="'black'" style="width:686rpx; "></nav-bar>
		      <scroll-view scroll-y class="scrollView">
		<view class="header">
			<view class="content-item">
				<view class="item" v-for="(item,index) in list" @click="goDetails(item)">
					<view class="item-left" >
                       <image :src="url + item.url" class="img"></image>
					</view>
					<view class="item-right">
						<view class="title">{{item.title}}</view>
						<view class="content-txt" v-html="item.content">
						</view>
					</view>
					<view class="icon">
						<view class="icon-content">
							<u-icon name="arrow-right" size="15" color="#159DFF"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		
		 <image  v-if="!list.length" src="../../static/images2/empty.png"  style=" margin-top: 200rpx; position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
	</view>
</template>

<script>
	//import api from "@/api/protocol";
		import {baseUrl} from "@/config.js"
	import { baseImgUrl } from "@/config";
	import mine from "@/api/mine" 
	export default {

		data() {
			return {
				baseImgUrl,
				list: [
				
				],
				url:""
			}
		},
		mounted(){
			this.url = baseUrl
		},
		onLoad(query) {
		
		},
		onShow() {
		this.getContentList()
		},
		onReady() {},
		methods: {

		    // 推荐
		    getContentList() {
		        mine.getContentList({type:6}).then((res) => {
		            if (res.code == 200) {
						 this.list = res.rows
		            }
		        });
		    },
			goDetails(row){
				  uni.navigateTo({
				      url: "/subPages/healthyDetails/healthyDetails?id="+row.id,
				  })
			},
		},
	}
</script>

<style scoped>
	.header {
		position: relative;
		display: flex;
		justify-content: center;
		padding-top: 30rpx;
	 
	}
    .img{
		 width: 100%;
		 height: 100%;
	}
	.bag {
		position: absolute;
		top: 0;
		z-index: -1;
		background: linear-gradient(#FFE9CD, #f4f4f4);
		width: 100%;
	    
		height: 350rpx;
	}

	.content {
		height: 100vh;
		width: 100%;
	    display: flex;
		flex-direction: column;
        align-items: center;
		overflow: hidden;
		overflow-y: scroll;
		z-index: 1000;
		/* 超出内容加滚动条 */
	}

	.content-item {
		    margin-top: 0rpx;
			z-index: 100;
	}

	.item {
		width: 686rpx;
		height: 208rpx;
		display: flex;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding-left: 34rpx;
		align-items: center;
		position: relative;
	}

	.item-left {
		width: 164rpx;
		height: 158rpx;
		/* background-color: red; */
		border-radius: 20rpx;
		/* overflow: hidden; */
	}

	.item-right {
		width: 442rpx;
	}

	.title {
		width: 442rpx;
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 14rpx;
	}

	.content-txt {
		width: 392rpx;
		/* height: 90rpx; */
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #777777;
		text-align: left;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		margin-top: 14rpx;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin-left: 14rpx;
	}

	.icon {
		position: absolute;
		bottom: 15rpx;
		right: 20rpx;
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #EDF8FF;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
	}

	.icon-content {
		color: #159DFF;

	}
</style>